<template>
	<div class="lottery lottery-page" :class="btmShow?'lottery-toggle':''">
		<van-nav-bar :border="false" :placeholder="true" :fixed="true" left-arrow @click-left="onClickLeft">
			<template #right>
				<div class="iconfont rightIcon icon-icon_chat"></div>
				<div @click="menushow = true" class="iconfont rightIcon icon-icon_sidebar"></div>
			</template>
			<template #title>
				<p @click="topshow = true"> {{topname}} <i class="iconfont icon-icon_drop_down_solid"></i></p>
			</template>
		</van-nav-bar>
		<div class="scrollList" ref="scrollList">
		<div class="wrapper-tontent">
			<div class="openResult">
				<div class="top">
					<div class="selectAllLottery" @click="url('/allGameSelect')"><span class="">Miền Bắc VIP 45 giây</span><span class="iconfont icon-icon_drop_down_solid"></span></div>
					<div @click="url('/historyData')" class="dataBtn"><span class="iconfont icon-icon_data"></span> Số liệu </div>
				</div>
				<div class="issue">
					<div class="issueText"><span > số kỳ mở thưởng</span><i>202111131667</i></div>
					<div class="status">Đang mở kèo</div>
				</div>
				<van-count-down :time="time">
					<template #default="timeData">
						<span class="block">{{ timeData.hours }}</span>
						<span class="colon">:</span>
						<span class="block">{{ timeData.minutes }}</span>
						<span class="colon">:</span>
						<span class="block">{{ timeData.seconds }}</span>
					</template>
				</van-count-down>
			</div>
			<van-tabs type="card" v-model="tabactive" title-inactive-color="#e9cfa4" title-active-color="#293356">
				<van-tab title="Nhập số">
					<div class="gm-main">
						<div class="gm-rule"><span>Tỉ lệ：99.5</span><i class="van-icon van-icon-info-o"></i></div>
						<div class="inputBet">
							<div class="inputBox">
								<textarea @input="textarea" rows="3" cols="" placeholder="Vui lòng nhập số đặt cược theo định dạng: mỗi số được cách bởi đâu phẩy, ví dụ 11,12" v-model="textareadesc"></textarea>
							</div>
							<div class="input-button">
								<button type="button" class="btn reBtn">Xoá</button>
								<button type="button" class="btn subBtn" :disabled="disabled">Xác nhận</button>
							</div>
						</div>
					</div>
				</van-tab>
				<van-tab title="Chọn nhanh">
					<div class="gm-main">
						<div class="odds oddsBox">
							<div @click="url('/rule')">
								<i class="van-icon van-icon-info-o"></i><span>Hướng dẫn chọn số</span>
							</div>
							<div @click="url('/rule')">
								<span>Tỉ lệ：99.5</span><i class="van-icon van-icon-info-o"></i>
							</div>
						</div>
						<div class="quickBet">
							<div class="funcBox" style="height: 40px;">
								<div class="row1">
									<div class="nums isClick">
										00-99 <span class="miss circle hot">1</span>
									</div>
								</div>
							</div>
							<div class="selectNum">
								<ul>
									<li v-for="(item, index) in selectNumlist" :data-index="index" @click="setListCheck(index)" :key="index" class="item" :class="item.check?'active':''">
										<span>{{ index }}</span>
									</li>
								</ul>
							</div>
						</div>
					</div>
				</van-tab>
			</van-tabs>
		</div>
		</div>
		<!-- 弹窗 -->
		<van-popup v-model="topshow" position="top" :style="{ height: '100%' }" >
			<div class="plays-panel">
				<div class="playsBox">
					<div class="playName">Số thường</div>
					<ul class="playName-select">
						<li v-for="(item,index) in playSelectA" :key="index" :class="item == playActive?'active':''" @click="playSelect(item)">
							<div class="play-name-box">{{item}}</div>
						</li>
					</ul>
				</div>
				<div class="playsBox">
					<div class="playName">Nhiều số</div>
					<ul class="playName-select">
						<li v-for="(item,index) in playSelectB" :key="index" :class="item == playActive?'active':''" @click="playSelect(item)"><div class="play-name-box">{{item}}</div></li>
					</ul>
				</div>
				<div class="playsBox">
					<div class="playName">Lô trượt</div>
					<ul class="playName-select">
						<li v-for="(item,index) in playSelectC" :key="index" :class="item == playActive?'active':''" @click="playSelect(item)"><div class="play-name-box">{{item}}</div></li>
					</ul>
				</div>
				<div class="playsBox">
					<div class="playName">Chọn 1</div>
					<ul class="playName-select">
						<li v-for="(item,index) in playSelectD" :key="index" :class="item == playActive?'active':''" @click="playSelect(item)"><div class="play-name-box">{{item}}</div></li>
					</ul>
				</div>
			</div>
		</van-popup>
		<!-- 菜单 -->
		<van-popup v-model="menushow" position="right" :style="{ height: '100%' }" >
			<div class="rightMenu">
				<div class="userInfoBox">
					<div class="avatar-container">
						<van-uploader v-model="fileList" multiple :max-count="1" preview-size="60px">
							<template>
								<div class="van-uploader__input-wrapper"><img class="avatar-img"
										src="../../assets/images/default_chat.png" lazy="loaded"
										style="width: 60px; height: 60px;"></div>
							</template>
						</van-uploader>
						<i class="iconfont icon-icon_edit_avatar"></i>
					</div>
					<div class="money">99,541,000 <span>VND</span></div>
					<div class="username">xiaobao</div>
					<div class="btnBox">
						<button type="button">Rút tiền</button>
						<button type="button">Nạp tiền</button>
					</div>
				</div>
				<div class="menuListBox">
					<van-cell is-link to="/">Lịch sử giao dịch</van-cell>
					<van-cell is-link to="/">Lịch sử</van-cell>
					<van-cell is-link to="/">Chi tiết</van-cell>
					<van-cell is-link to="/">Cách chơi</van-cell>
					<van-cell is-link to="/">Nạp tiền</van-cell>
					<van-cell is-link to="/">Trở về trang chủ</van-cell>
					<van-cell is-link to="/">Thoát an toàn</van-cell>
				</div>
			</div>
		</van-popup>
		<van-popup v-model="btmShow" position="bottom" >
			<div class="betConfirmPop">
				<div class="title">
					<div class="defMoney">
						<span>Mặc định <i>1,000</i></span><i class="van-icon van-icon-edit"></i>
					</div>
					<div class="balance">
						<span>Số dư <i>99,541,000</i></span>
					</div>
				</div>
				<div class="quickSelect">
					<div class="moneyItem" @click="onTabquic(item.value)" v-for="(item,index) in tabsquic" :key="index" :class="quickcur == index?'active':''" >
						{{item.label}}
					</div>
				</div>
				<div class="betInfo">
					<div class="inputGroup">
						<div class="flex-center"><span>Số đơn cược<i>54</i></span></div>
						<div class="flex-center"><span>Số đơn cược<i>1</i><i>X</i></span><input type="tel" v-model="betVal"></div>
					</div>
					<div class="btnGroup">
						<button type="button" @click="cancel" class="cancelBtn">Huỷ đơn</button>
						<van-button class="betBtn">Đặt Cược<br>162,000</van-button>
					</div>
				</div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				tabactive:1,
				ngshow:false,
				trshow:false,
				chshow:true,
				showA:true,
				showB:true,
				showC:true,
				topname:'Lô 2 Số',
				topshow:false,
				menushow:false,
				btmShow:false,
				time:30 * 60 * 60 * 1000,
				playActive:'',
				playSelectA:['Số thường'],
				playSelectB:['Trúng 4 số','Trúng 3 số','Trúng 2 số'],
				playSelectC:['Trượt xiên 5','Trượt xiên 6','Trượt xiên 7','Trượt xiên 8','Trượt xiên 9','Trượt xiên 10',],
				playSelectD:['Chọn 5 ăn 1','Chọn 6 ăn 1','Chọn 7 ăn 1','Chọn 8 ăn 1','Chọn 9 ăn 1','Chọn 10 ăn 1',],
				fileList: [],
				textareadesc:'',
				disabled:true,
				
				
				selectNumlist: [
					{check: false, label: '0',miss: 1},
					{check: false, label: '1',miss: 1},
					{check: false, label: '2',miss: 2},
					{check: false, label: '3',miss: 3},
					{check: false, label: '4',miss: 3},
					{check: false, label: '5',miss: 4},
					{check: false, label: '6',miss: 5},
					{check: false, label: '7',miss: 6},
					{check: false, label: '8',miss: 7},
					{check: false, label: '9',miss: 8},
					{check: false, label: '10',miss: 9},
					{check: false, label: '11',miss: 1},
					{check: false, label: '12',miss: 2},
					{check: false, label: '13',miss: 2},
					{check: false, label: '14',miss: 3},
					{check: false, label: '15',miss: 4},
					{check: false, label: '16',miss: 5},
					{check: false, label: '17',miss: 6},
					{check: false, label: '18',miss: 7},
					{check: false, label: '19',miss: 8},
					{check: false, label: '20',miss: 9},
					{check: false, label: '21',miss: 1},
					{check: false, label: '22',miss: 2},
					{check: false, label: '23',miss: 2},
					{check: false, label: '24',miss: 3},
					{check: false, label: '25',miss: 4},
					{check: false, label: '26',miss: 5},
					{check: false, label: '27',miss: 6},
					{check: false, label: '28',miss: 7},
					{check: false, label: '29',miss: 8},
					{check: false, label: '30',miss: 9},
					{check: false, label: '31',miss: 1},
					{check: false, label: '32',miss: 2},
					{check: false, label: '33',miss: 3},
					{check: false, label: '34',miss: 3},
					{check: false, label: '35',miss: 4},
					{check: false, label: '36',miss: 5},
					{check: false, label: '37',miss: 6},
					{check: false, label: '38',miss: 7},
					{check: false, label: '39',miss: 8},
					{check: false, label: '40',miss: 9},
					{check: false, label: '41',miss: 1},
					{check: false, label: '42',miss: 2},
					{check: false, label: '43',miss: 3},
					{check: false, label: '44',miss: 3},
				],
				selectedItems:[],
				quickcur: 0,
				tabsquic: [
					{
						label:'+1K',
						value:'1000'
					},{
						label:'+5K',
						value:'5000'
					},{
						label:'+10K',
						value:'10000'
					},{
						label:'+50K',
						value:'50000'
					},{
						label:'+100K',
						value:'100000'
					},{
						label:'+500K',
						value:'1000'
					},{
						label:'+1M',
						value:'1000'
					},{
						label:'+5M',
						value:'1000'
					},{
						label:'+10M',
						value:'1000'
					},{
						label:'+50M',
						value:'1000'
					}
				],
				betVal:'',
			}
		},
	
		methods: {
			url(url) {
				this.$router.push({
					path: url
				})
			},
			onClickLeft() {
				this.$router.go(-1)
			},
			playSelect(name){
				this.playActive  = name
				this.topshow = false
				this.topname = name
				
			},
			textarea(e){
				var txtVal = this.textareadesc.length;
				if(txtVal > 0){
					this.disabled = false
				}
			},
			onTabA(e){
				this.curA = e
			},
			onTabC(e){},
			setListCheck: function(idx) {
				var check = this.selectNumlist[idx].check;
				this.selectNumlist[idx].check = check === true ? false : true;
				if (this.selectNumlist[idx].check) {
					this.selectedItems.push(check)
				} else{
					const i = this.selectedItems.indexOf(idx)
					this.selectedItems.splice(i, 1)
				}
				if(this.selectedItems.length>4){
					this.btmShow = true
				}
				
			},
			onTabquic(e){
				this.betVal = e
			},
			cancel(){
				this.btmShow = false
				this.selectNumlist.forEach((item,index)=>{
					this.selectNumlist[index].check = false; 
				})
			},
		}
	}
</script>
